<template>
	<div class="certification">
		<Card :bordered="false" dis-hover class="infoBlock">
			<!-- <p slot="title">实名认证</p> -->
			<Form :model="formTop" label-position="top" ref="formTop" :rules="formTopRules">
				<Row>
					<Col span="8">
					<FormItem label="进鉴类型" prop="reportType">
						<Select v-model="formTop.reportType" placeholder="请选择">
							<Option v-for="(item,index) in cardType" :key="index" :value="item.value">{{item.name}}</Option>
						</Select>
					</FormItem>
					</Col>
				</Row>
			</Form>
		</Card>
		<Card :bordered="false" dis-hover class="infoBlock">
			<p slot="title">法人信息</p>
			<Form :model="formTop" label-position="top" ref="formTop_corporateInformation" :rules="formTopRules">
				<Row :gutter="20">
					<Col span="8">
					<FormItem label="法人姓名" prop="contactName">
						<Input v-model="formTop.contactName" placeholder="请输入"></Input>
					</FormItem>
					</Col>
					<Col span="8">
					<FormItem label="法人身份证号" prop="cerdId">
						<Input v-model="formTop.cerdId" placeholder="请输入"></Input>
					</FormItem>
					</Col>
					<Col span="8">
					<FormItem label="法人代表证件有效期" prop="cardDeadline">
						<DatePicker type="date" v-model="formTop.cardDeadline" placeholder="请输入" style="width:100%"></DatePicker>
					</FormItem>
					</Col>
					<Col span="8">
					<FormItem label="法人手机" prop="contactPhone">
						<Input v-model="formTop.contactPhone" placeholder="请输入"></Input>
					</FormItem>
					</Col>
					<Col span="8">
					<FormItem label="法人邮箱" prop="contactEmail">
						<Input v-model="formTop.contactEmail" placeholder="请输入"></Input>
					</FormItem>
					</Col>

					<Col span="8">
					<FormItem label="营业执照类型" prop="licenseType">
						<Select v-model="formTop.licenseType" placeholder="请选择" :disabled="licenseTypeDisabled">
							<Option v-for="(item,index) in licenseTypeLists" :key="index" :value="item.value">{{item.name}}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="8" v-if="formTop.licenseType!='2'">
					<FormItem label="社会统一代码/营业执照" prop="licenceNo" :class="formTop.licenseType!='2'?'ivu-form-item-required':''">
						<Input v-model="formTop.licenceNo" placeholder="请输入"></Input>
					</FormItem>
					</Col>
					<Col span="8" v-if="formTop.reportType=='02'">
					<FormItem label="性别" prop="legalSex" :class="formTop.reportType=='02'?'ivu-form-item-required':''">
						<Select v-model="formTop.legalSex" placeholder="请选择">
							<Option v-for="(item,index) in legalSexLists" :key="index" :value="item.value">{{item.name}}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="8" v-if="formTop.reportType=='02'">
					<FormItem label="社法人职业" prop="legalOccupation" :class="formTop.reportType=='02'?'ivu-form-item-required':''">
						<Select v-model="formTop.legalOccupation" placeholder="请选择">
							<Option v-for="(item,index) in legalOccupationLists" :key="index" :value="item.value">{{item.name}}</Option>
						</Select>
					</FormItem>
					</Col>
				</Row>
			</Form>
		</Card>
		<Card :bordered="false" dis-hover class="infoBlock">
			<p slot="title">地址信息</p>
			<Form :model="formTop" label-position="top" ref="formTop_addreddInfo" :rules="formTopRules">
				<Row>
					<Col span="24">
					<FormItem label="营业地区" prop="businessArea">
						<Row :gutter="20">
							<Col span="8">
							<Select v-model="formTop.provinceId" placeholder="请选择省" @on-change="gainCityDatas">
								<Option v-for="(item,index) in provinceLists" :key="index" :value="item.id">{{item.name}}</Option>
							</Select>
							</Col>
							<Col span="8">
							<Select v-model="formTop.cityId" placeholder="请选择市" @on-change="gainAreaDatas">
								<Option v-for="(item,index) in cityLists" :key="index" :value="item.id">{{item.name}}</Option>
							</Select>
							</Col>
							<Col span="8">
							<Select v-model="formTop.countryId" placeholder="请选择区">
								<Option v-for="(item,index) in areaLists" :key="index" :value="item.id">{{item.name}}</Option>
							</Select>
							</Col>
						</Row>
					</FormItem>
					</Col>
				</Row>
				<Row>
					<Col span="24">
					<FormItem label="营业地址" prop="businessAddress">
						<Row :gutter="20">
							<Col span="8">
							<Input v-model="formTop.road" placeholder="请输入路名"></Input>
							</Col>
							<Col span="8">
							<Input v-model="formTop.buildingCode" placeholder="请输入门牌号"></Input>
							</Col>
							<Col span="8">
							<Input v-model="formTop.address" placeholder="详细地址"></Input>
							</Col>
						</Row>
					</FormItem>
					</Col>
				</Row>
			</Form>
		</Card>
		<Card :bordered="false" dis-hover class="infoBlock">
			<p slot="title">账户信息</p>
			<Form :model="formTop" label-position="top" ref="formTop_accountInfo" :rules="formTopRules">
				<Row :gutter="20">
					<Col span="8">
					<FormItem label="商户营业名称" prop="busiName">
						<Input v-model="formTop.busiName" placeholder="请输入"></Input>
					</FormItem>
					</Col>
					<Col span="8">
					<FormItem label="开户行支行名称" prop="accBankName">
						<Select v-model="formTop.accBankName" filterable remote :remote-method="remoteMethod1" :loading="loading">
							<Option v-for="(option, index) in bankLists" :value="option.label" :key="index">{{option.label}}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="8">
					<FormItem label="开户行账号" prop="cardNoCipher">
						<Input v-model="formTop.cardNoCipher" placeholder="请输入"></Input>
					</FormItem>
					</Col>
					<Col span="8">
					<FormItem label="开户账号名称" prop="cardName">
						<Input v-model="formTop.cardName" placeholder="请输入"></Input>
					</FormItem>
					</Col>
					<Col span="8">
					<FormItem label="行业类别" prop="mccCode" v-if="formTop.reportType=='02'">
						<Select v-model="formTop.mccCode" placeholder="请选择">
							<Option v-for="(item,index) in mccCodeLists" :key="index" :value="item.value">{{item.name}}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="8">
					<FormItem label="是否有营业场所" prop="isBusiPlace" v-if="formTop.reportType=='02'">
						<RadioGroup v-model="formTop.isBusiPlace">
							<Radio label="1">是</Radio>
							<Radio label="0">否</Radio>
						</RadioGroup>
					</FormItem>
					</Col>
				</Row>
			</Form>
		</Card>
		<Card :bordered="false" dis-hover>
			<p slot="title">证件证明</p>
			<Form :model="formTop" label-position="top" ref="formTop_certificateIdentity" :rules="formTopRules">
				<Row>
					<Col span="24">
					<FormItem class="ivu-form-item-required" label="法人身份证正反面" prop="pic12">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :btnTxt="'上传法人身份证正面'" :uploadButton="'photo0'" :maxUploads="1"
						 :defaultList="defaultList1" @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
						<imageUpload :url="$api.POST_UPLOAD_IMG" :btnTxt="'上传法人身份证反面'" :uploadButton="'photo1'" :maxUploads="1"
						 :defaultList="defaultList2" @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
				</Row>
				<Row>
					<Col span="24" v-if="formTop.reportType!='00'">
					<FormItem class="ivu-form-item-required" label="自拍照片(手持身份证)" prop="pic3">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo2'" :maxUploads="1" :defaultList="defaultList3"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
					<Col span="24" v-if="formTop.reportType=='00'">
					<FormItem class="ivu-form-item-required" label="开户许可证" prop="pic9">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo8'" :maxUploads="1" :defaultList="defaultList9"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
				</Row>
				<Row>
					<Col span="24" v-if="formTop.reportType!='02'">
					<FormItem class="ivu-form-item-required" label="营业执照" prop="pic4">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo3'" :maxUploads="1" :defaultList="defaultList4"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
				</Row>
				<Row>
					<Col span="24" v-if="formTop.reportType!='02'">
					<FormItem :class="this.formTop.licenseType=='0'?'':'ivu-form-item-required'" label="商务税务登记证" prop="pic5">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo4'" :maxUploads="1" :defaultList="defaultList5"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
				</Row>
				<Row v-if="formTop.reportType!='02'">
					<Col span="24">
					<FormItem :class="this.formTop.licenseType=='0'?'':'ivu-form-item-required'" label="组织机构代码证" prop="pic6">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo5'" :maxUploads="1" :defaultList="defaultList6"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
				</Row>
				<Row>
					<Col span="24">
					<FormItem label="门头照片" prop="pic7" :class="formTop.reportType=='00'||formTop.reportType=='01'||formTop.isBusiPlace=='1'?'ivu-form-item-required':''">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo6'" :maxUploads="1" :defaultList="defaultList7"
						 @on-complete="uploadComplete" @on-remove="uploadRemove">
						</imageUpload>
					</FormItem>
					</Col>
				</Row>
				<Row>
					<Col span="24">
					<FormItem label="室内照片" prop="pic8" :class="formTop.reportType=='00'||formTop.reportType=='01'||formTop.isBusiPlace=='1'?'ivu-form-item-required':''">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo7'" :maxUploads="1" :defaultList="defaultList8"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
					<Col span="24" v-if="formTop.reportType=='02'">
					<FormItem label="辅助证明材料" class="ivu-form-item-required" prop="pic10">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo9'" :maxUploads="1" :defaultList="defaultList10"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
					<Col span="24" v-if="formTop.reportType=='02'">
					<FormItem label="经营商品照片" class="ivu-form-item-required" prop="pic11">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo10'" :maxUploads="1" :defaultList="defaultList11"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
					<Col span="24" v-if="formTop.reportType=='02'">
					<FormItem label="租赁协议">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo16'" :maxUploads="1" :defaultList="defaultList17"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
					<Col span="24" v-if="formTop.reportType=='02'">
					<FormItem label="产权证明">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo12'" :maxUploads="1" :defaultList="defaultList13"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
					<Col span="24" v-if="formTop.reportType=='02'">
					<FormItem label="执业资质证照">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo13'" :maxUploads="1" :defaultList="defaultList14"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
					<Col span="24" v-if="formTop.reportType=='02'">
					<FormItem label="第三方证明">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo14'" :maxUploads="1" :defaultList="defaultList15"
						 @on-complete="uploadComplete" @on-remove="uploadRemove" >
						</imageUpload>
					</FormItem>
					</Col>
					<Col span="24" v-if="formTop.reportType=='02'">
					<FormItem label="其他小微商户证明材料" prop="pic5In1">
						<imageUpload :url="$api.POST_UPLOAD_IMG" :uploadButton="'photo15'" :maxUploads="1" :defaultList="defaultList16"
						 @on-complete="uploadComplete" @on-remove="uploadRemove">
						</imageUpload>
					</FormItem>
					</Col>
					<Col span="24">
					<Checkbox v-model="formTop.agree">阅读并接受<span style="color:red" @click="showContent">《厦门同安租赁网站注册协议》</span></Checkbox>
					</Col>
				</Row>
			</Form>
		</Card>
		<Row type="flex" justify="end" class="cert_opeation" align="middle" :gutter="20">
			<Col> <Button type="primary" ghost @click="GiveUp">放弃认证</Button></Col>
			<Col> <Button type="primary" @click="handleSave('formTop')">实名认证</Button></Col>
		</Row>

	</div>

</template>

<script>
	import imageUpload from "../../upload/image-upload.vue";
	import Format from "../../libs/Format.js"
	export default {
		components: {
			imageUpload
		},
		data() {
			const checkAddress = (rule, value, callback) => {
				if (this.formTop.provinceId != undefined && this.formTop.cityId != undefined && this.formTop.countryId !=
					undefined) {
					callback();
				} else {
					callback(new Error('请选择省、市、区'));
				}
			};
			const checkBusinessAddress = (rule, value, callback) => {
				if (this.formTop.road != undefined && this.formTop.buildingCode != undefined && this.formTop.address != undefined) {
					callback();
				} else {
					callback(new Error('营业地址'));
				}
			};
			const checkBankName = (rule, value, callback) => {
				if (this.formTop.accBankName != undefined) {
					callback();
				} else {
					callback(new Error('开户行支行名称'));
				}
			};
			const checkDeadLine = (rule, value, callback) => {
				if (this.formTop.cardDeadline != undefined && this.formTop.cardDeadline != "") {
					callback();
				} else {
					callback(new Error('法人代表证件有效期'));
				}
			};
			const validatepic12 = (rule, value, callback) => {
				if (this.defaultList1.length == 0 || this.defaultList2.length == 0) {
					callback(new Error('请选择图片'));
				} else {
					callback()
				}
			}
			const validatepic3 = (rule, value, callback) => {
				if (this.defaultList3.length == 0) {
					callback(new Error('请选择图片'));
				} else {
					callback()
				}
			}
			const validatepic4 = (rule, value, callback) => {
				if (this.defaultList4.length == 0) {
					callback(new Error('请选择图片'));
				} else {
					callback()
				}
			}
			const validatepic5 = (rule, value, callback) => {
				if (this.formTop.licenseType != '0') {
					if (this.defaultList5.length == 0) {
						callback(new Error('请选择图片'));
					} else {
						callback()
					}
				} else {
					callback()
				}
			}
			const validatepic6 = (rule, value, callback) => {
				if (this.formTop.licenseType != '0') {
					if (this.defaultList6.length == 0) {
						callback(new Error('请选择图片'));
					} else {
						callback()
					}
				} else {
					callback()
				}
			}
			const validatepic7 = (rule, value, callback) => {
				if (this.formTop.isBusiPlace == "1") {
					if (this.defaultList7.length == 0) {
						callback(new Error('请选择图片'));
					} else {
						callback()
					}
				} else {
					callback()
				}

			}
			const validatepic8 = (rule, value, callback) => {
				if (this.formTop.isBusiPlace == "1") {
					if (this.defaultList8.length == 0) {
						callback(new Error('请选择图片'));
					} else {
						callback()
					}
				} else {
					callback()
				}
			}
			const validatepic9 = (rule, value, callback) => {
				if (this.defaultList9.length == 0) {
					callback(new Error('请选择图片'));
				} else {
					callback()
				}
			}
			const validatepic10 = (rule, value, callback) => {
				if (this.defaultList10.length == 0) {
					callback(new Error('请选择图片'));
				} else {
					callback()
				}
			}
			const validatepic11 = (rule, value, callback) => {
				if (this.defaultList11.length == 0) {
					callback(new Error('请选择图片'));
				} else {
					callback()
				}
			}
			const validatepic5In1 = (rule, value, callback) => {
				if (this.defaultList13.length != 0 || this.defaultList14.length != 0 || this.defaultList15.length != 0 || this.defaultList16
					.length != 0 || this.defaultList17.length != 0) {
					callback()
				} else {
					callback(new Error('租赁协议，产权证明，执业资质证照，第三方证明，其他小微商户证明材料请至少选择一张图片上传'));
				}
			}
			const checkLegalSex = (rule, value, callback) => {
				if (this.formTop.reportType == '02') {
					if (value == "" || value == undefined) {
						callback(new Error('选择性别'));
					} else {
						callback()
					}
				} else {
					callback()
				}

			}
			const checkLegalOccupation = (rule, value, callback) => {
				if (this.formTop.reportType == '02') {
					if (value == "" || value == undefined) {
						callback(new Error('填写职业'));
					} else {
						callback()
					}
				} else {
					callback()
				}
			}
			const checkLicenceNo = (rule, value, callback) => {
				if (this.formTop.licenseType == '0' || this.formTop.licenseType == '1' || this.formTop.licenseType == '' || this.formTop
					.licenseType == undefined) {
					if (value == "" || value == undefined) {
						callback(new Error('社会统一代码/营业执照'));
					} else {
						callback()
					}
				} else {
					callback()
				}
			}
			return {
				certificateType: '01', //01个人 00企业  02小微
				formTop: {
					licenceNo: "",
					agree: false,
					picList: [],
					reportType: "00",
					contactName: "何本爽",
					cerdId: "420104199012030013",
					contactPhone: "18995534000",
					contactEmail: "939378831@qq.com",
					cardDeadline: "2020-10-31",
					busiName: "银联商务股份有限公司",
					cardNoCipher: "6225880066668888",
					cardName: "何本爽",
					provinceId: "31",
					cityId: "310100",
					countryId: "310105",
					road: "天山路",
					buildingCode: "8号",
					address: "上海市上海市长宁区天山路8号",
					licenseType: "0",
					licenceNo: "666666666666666"
				},
				formTopRules: {
					reportType: [{
						required: true,
						message: "选择进件类型",
						trigger: 'change'
					}],
					contactName: [{
						required: true,
						message: "法人姓名",
						trigger: 'blur'
					}],
					cerdId: [{
						required: true,
						validator: Format.FormValidate.Form().ID
					}],
					cardDeadline: [{
						required: true,
						validator: checkDeadLine
					}],
					contactPhone: [{
						required: true,
						validator: Format.FormValidate.Form().Tel
					}],
					contactEmail: [{
							required: true,
							message: "法人邮箱",
							trigger: 'blur'
						},
						{
							type: 'email',
							message: '法人邮箱格式不对',
							trigger: 'blur'
						}
					],
					mccCode: [{
						required: true,
						message: "请选择行业类别"
					}],
					isBusiPlace: [{
						required: true,
						message: "勾选是否有营业场所"
					}],
					// 					isCompay: [{
					// 						required: true,
					// 						message: "是否对公账户",
					// 						trigger: 'change'
					// 					}],
					licenseType: [{
						required: true,
						message: " 营业执照类型",
						trigger: 'change'
					}],
					businessArea: [{
						required: true,
						validator: checkAddress
					}],
					businessAddress: [{
						required: true,
						validator: checkBusinessAddress
					}],
					busiName: [{
						required: true,
						message: "商户营业名称",
						trigger: 'blur'
					}],
					accBankName: [{
						required: true,
						validator: checkBankName
					}],
					cardNoCipher: [{
						required: true,
						message: "开户行账号",
						trigger: 'blur'
					}],
					cardName: [{
						required: true,
						message: "开户账号名称",
						trigger: 'blur'
					}],
					pic12: [{
						validator: validatepic12,
						trigger: 'change'
					}],
					pic3: [{
						validator: validatepic3,
						trigger: 'change'
					}],
					pic4: [{
						validator: validatepic4,
						trigger: 'change'
					}],
					pic5: [{
						validator: validatepic5,
						trigger: 'change'
					}],
					pic6: [{
						validator: validatepic6,
						trigger: 'change'
					}],
					pic7: [{
						validator: validatepic7,
						trigger: 'change'
					}],
					pic8: [{
						validator: validatepic8,
						trigger: 'change'
					}],
					pic9: [{
						validator: validatepic9,
						trigger: 'change'
					}],
					pic10: [{
						validator: validatepic10,
						trigger: 'change'
					}],
					pic11: [{
						validator: validatepic11,
						trigger: 'change'
					}],
					pic5In1: [{
						validator: validatepic5In1,
						trigger: 'change'
					}],
					legalSex: [{
						validator: checkLegalSex,
						trigger: 'blur'
					}],
					legalOccupation: [{
						validator: checkLegalOccupation,
						trigger: 'blur'
					}],
					licenceNo: [{
						validator: checkLicenceNo,
						trigger: 'blur'
					}]
				},
				defaultList1: [],
				defaultList2: [],
				defaultList3: [],
				defaultList4: [],
				defaultList5: [],
				defaultList6: [],
				defaultList7: [],
				defaultList8: [],
				defaultList9: [],
				defaultList10: [],
				defaultList11: [],
				defaultList13: [],
				defaultList14: [],
				defaultList15: [],
				defaultList16: [],
				defaultList17: [],
				abandonCertification: false,
				certificateIsSuccess: false,
				certificateMsg: "",
				cardType: [{
						name: "企业商户",
						value: "00"
					},
					{
						name: "个人商户",
						value: "01"
					}, {
						name: "小微商户",
						value: "02"
					}
				],
				legalSexLists: [{
					name: "男性",
					value: "1"
				}, {
					name: "女性",
					value: "2"
				}, {
					name: "女性改（变）为男性",
					value: "5"
				}, {
					name: "男性改（变）为女性",
					value: "6"
				}, {
					name: "未说明的性别",
					value: "6"
				}],
				licenseTypeLists: [{
						name: "多合一营业执照",
						value: "0"
					},
					{
						name: "普通营业执照",
						value: "1"
					},
					{
						name: "无营业执照",
						value: "2"
					}
				],
				provinceLists: [],
				cityLists: [],
				areaLists: [],
				loading: false,
				bankLists: [],
				mccCodeLists: [{
						name: "综合零售-各类杂货店、便利店,线下小零售",
						value: "5331"
					},
					{
						name: "餐饮业-快餐店",
						value: "5814"
					},
					{
						name: "居民服务-家政服务",
						value: "7295"
					},
					{
						name: "居民服务-未列入其他代码的个人服务,家教,美甲美容师",
						value: "7299"
					},
					{
						name: "交通运输、物流和仓储服务-出租车服务",
						value: "4121"
					},
					{
						name: "批发商户-其他批发商",
						value: "4121"
					}
				],
				legalOccupationLists: [{
						name: "各类专业、技术人员",
						value: "0"
					},
					{
						name: "国家机关、党群组织、企事业单位的负责人",
						value: "1"
					},
					{
						name: "办事人员和有关人员",
						value: "2"
					},
					{
						name: "商业工作人员",
						value: "3"
					},
					{
						name: "服务性工作人员",
						value: "4"
					},
					{
						name: "农林牧渔劳动者",
						value: "5"
					},
					{
						name: "生产工作、运输工作和部分体力劳动者",
						value: "6"
					},
					{
						name: "不便分类的其他劳动者",
						value: "7"
					}
				],
				licenseTypeDisabled: false
			}
		},
		mounted() {
			this.getProvince();

		},
		watch: {
			"formTop.reportType"() {
				if (this.formTop.reportType == "02") {
					let array = ["006", "0004", "0002", "0003"];
					if (this.formTop.picList.length > 0) {
						this.formTop.picList.forEach((ele, index) => {
							if (array.indexOf(ele.type != -1)) {
								this.formTop.picList.splice(index, 1);
							}
						})
					}
					this.defaultList4 = [];
					this.defaultList5 = [];
					this.defaultList6 = [];
					this.defaultList9 = [];
					this.formTop.licenseType = "2";
					this.licenseTypeDisabled = true;
				} else {
					let array
					if(this.formTop.reportType == "00"){
						 array = ["0007", "0008", "0016", "0017", "0018", "0019", "0020", "0021"];
						 this.defaultList3 = [];
					}else{
						 array = [ "0008", "0016", "0017", "0018", "0019", "0020", "0021"];	 
					}
					if (this.formTop.picList.length > 0) {
						this.formTop.picList.forEach((ele, index) => {
							if (array.indexOf(ele.type != -1)) {
								this.formTop.picList.splice(index, 1);
							}
						})
					}
					this.licenseTypeDisabled = false;
					this.defaultList10= [];
					this.defaultList11 = [];
					this.defaultList13 = [];
					this.defaultList14 = [];
					this.defaultList15 = [];
					this.defaultList16 = [];
					this.defaultList17= [];
				}
			}
		},
		methods: {
			showContent() {
				this.$Modal.warning({
					title: "同民安居认证服务协议",
					width: 900,
					content: "<div class='protocol'><p style='text-align:left;text-indent:20px'>为保障在线支付交易安全，依照中华人民共和国法律、法规以及有关监管政策要求，‘同民安居’平台采用银联商务自助注册签约系统(以下简称自助签约系统)实现在线支付功能，房东在‘同民安居’平台申请开通在线支付功能即视为同步申请银联商务股份有限公司自助签约系统商户。</p><p style='text-align:left;text-indent:20px'>（银联商务股份有限公司是中国银联控股的,专门从事银行卡受理市场建设和提供综合支付服务的机构,成立于2002年12月,总部设在上海市浦东新区。银联商务是首批获得人民银行《支付业务许可证》的支付机构,也是人民银行确定的21家重点支付机构之一。</p><p style='text-align:left;text-indent:20px'>银联商务自助注册签约系统(以下简称自助签约系统)是银联商务面向商户通过互联网平台递交业务开户申请并签订电子服务协议的官方窗口）</p><p style='text-align:left;text-indent:20px'>商户（房东）在自助签约系统申请开通支付受理业务时,需保证提供真实有效的证照材料,按照商户实际属性、名称等准确填写基本信息。在自助注册和签约过程中,自助签约系统所收集的商户证照材料和信息将按照严格的业务规则审核、使用、存储,不用于除业务申请备案和资金结算服务之外的其他用途,也无法通过任何外部系统读取访问。</p><p style='text-align:left;text-indent:20px'>商户（房东）应充分了解:网上自助签约主体的身份是通过对银行结算账户的实名验证结果来判断的,商户与银联商务所签订的电子服务协议等同于纸质协议的法律效力,且签约主体与银行结算账户同名; 房东作为商户自行承担与银联商务往来相应交易手续费，目前手续费率标准约为：0.7%（如有变更以银联商务公告为准）。在协议签订提交之后,银联商务业务部门审核通过,协议即签署成功,即时生效;在自助签约系统上,商户申办的每一项业务对应一份电子协议,一旦签署成功即保留当前版本的协议内容,商户可以登录自助签约系统查看或下载打印协议;当商户希望双方解除协议时,须通过人工客服或向所指定的客户经理提出,并通过人工流程撤销协议。</p></div>"
				});
			},
			getProvince() {
				this.$ajax.get(this, this.$api.GET_PROVINCE_CITY_AREA.replace("{id}", 0) + "?instanceId=" + this.$route.query.instanceId, {},
					(
						res) => {
						this.provinceLists = res.data.content.data;
					});
			},
			gainCityDatas(atg) {
				this.$ajax.get(this, this.$api.GET_PROVINCE_CITY_AREA.replace("{id}", atg) + "?instanceId=" + this.$route.query.instanceId, {},
					(
						res) => {
						this.cityLists = res.data.content.data;
					});
			},
			gainAreaDatas(atg) {
				this.$ajax.get(this, this.$api.GET_PROVINCE_CITY_AREA.replace("{id}", atg) + "?instanceId=" + this.$route.query.instanceId, {},
					(
						res) => {
						this.areaLists = res.data.content.data;
					});
			},
			formateDate(d) {
				if (String(d).indexOf('-') == -1) {
					let month = (d.getMonth() + 1) < 10 ? "0" + (d.getMonth() + 1) : (d.getMonth() + 1);
					let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
					const newDate = d.getFullYear() + '-' + month + '-' + day;
					return newDate;
				} else {
					return d;
				}

			},
			handleSave(name) {
				let flag = true;
				for (let refs in this.$refs) {
					this.$refs[refs].validate((valid) => {
						if (!valid) {
							flag = false;
						}
					})
				}
				if (this.formTop.agree == false) {
					flag = false;
				}
				if (flag == true) {
					this.formTop.cardDeadline = this.formateDate(this.formTop.cardDeadline);
					this.formTop.instanceId = this.$route.query.instanceId;
					this.formTop.client = "pc";
					this.formTop.number = this.$route.query.number;
					this.formTop.accBankNo = this.bankLists[0].value;
					this.formTop.isCompay = this.formTop.reportType == "02" || this.formTop.reportType == "01" ? "0" : "1";
					this.formTop.licenceNo = this.formTop.reportType == "02" ? "" : this.formTop.licenceNo;
					let data = JSON.parse(JSON.stringify(this.formTop));
					data.picList.forEach((ele, index) => {
						for (let key in ele) {
							let a = "picList[" + index + "]." + key;
							data[a] = ele[key];
						}
					})
					delete data.picList;
					this.$ajax.post(this, this.$api.GET_CHECK, data, (res) => {
						if (res != undefined && res.code == "200") {
							this.$Modal.success({
								title: "认证结果！",
								content: "认证通过",
								onOk: () => {
									this.getStatus();
								}
							});
						}
					});
				} else {
					this.$Modal.warning({
						title: "提示",
						content: "输入必填项且勾选网站协议"
					});
				}
			},
			getStatus() {
				let datas = {
					instanceId: this.$route.query.instanceId,
					number: this.$route.query.number
				}
				this.$router.push({
					name: "Error",
					query: {
						formdatas: JSON.stringify(datas),
						userType: this.$route.query.userType
					}
				})
			},
			GiveUp() {
				this.$Modal.warning({
					title: "提示",
					content: "未经实名认证，无法线上签署租约、查看租约、支付账单等租中租后业务"
				});
			},
			remoteMethod1(query) {
				if (query !== '') {
					this.loading = true;
					this.$ajax.get(this, this.$api.GET_BANK_LISTS +
						"?instanceId=" + this.$route.query.instanceId + "&cityId=" + this.formTop.cityId + "&name=" + query, {}, (res) => {
							setTimeout(() => {
								this.loading = false;
								const list = res.data.content.map(item => {
									return {
										value: item.code,
										label: item.bankBranchName
									};
								});
								this.bankLists = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
							}, 200);
						});

				} else {
					this.bankLists = [];
				}
			},
			uploadComplete(response, filename, type) {
				let index = Number(type.replace('photo', "")) + 1;
				let list = 'defaultList' + index;
				let data = response.data.content;
				let types = "";
				switch (index) {
					case 1:
						types = "0001"
						break;
					case 2:
						types = "0011"
						break;
					case 3:
						types = "0007"
						break;
					case 4:
						types = "0002"
						break;
					case 5:
						types = "0003"
						break;
					case 6:
						types = "0004"
						break;
					case 7:
						types = "0005"
						break;
					case 8:
						types = "0015"
						break;
					case 9:
						types = "0006"
						break;
					case 10:
						types = "0008"
						break;
					case 11:
						types = "0021"
						break;
					case 13:
						types = "0017"
						break;
					case 14:
						types = "0018"
						break;
					case 15:
						types = "0019"
						break;
					case 16:
						types = "0020"
						break;
					case 17:
						types = "0016"
						break;
					default:
						break;
				}
				this[list] = [];
				this[list].push({
					path: data.file_path,
					type: types,
					size: data.file_size
				});
				if (this.formTop.picList.length > 0) {
					this.formTop.picList.forEach((item, index) => {
						if (item.type == types) {
							this.formTop.picList.splice(index, 1);
						}
					})
				}
				this.formTop.picList.push.apply(this.formTop.picList, this[list]);
			},
			//删除一张图片
			uploadRemove(item, type) {
				let list = 'defaultList' + (Number(type.replace('photo', "")) + 1);
				this[list].forEach((ele, index) => {
					if (ele.path == item.path) {
						this[list].splice(index, 1);
					}
				});
				this.formTop.picList.forEach((ele, index) => {
					if (ele.path == item.path) {
						this.formTop.picList.splice(index, 1);
					}
				});
			},
			ok() {
				this.abandonCertification = false;
				this.certificateIsSuccess = false;
			},
			cancel() {
				this.abandonCertification = false;
				this.certificateIsSuccess = false;
			}
		}
	}
</script>
<style scoped>
	.certification {
		padding: 10px;
	}

	.infoBlock {
		margin-bottom: 10px;
	}
	.cert_opeation {
		position: relative;
		size: 20;
		background: white;
		height: 80px;
		bottom: 0px;
		padding: 0 10px;
		-moz-box-shadow: 0px -3px 4px #CCCCCC;
		-webkit-box-shadow: 0px -3px 4px #CCCCCC;
		box-shadow: 0px -3px 4px #CCCCCC;
	}
	.abandonCertification p {
		text-align: center;
		margin: 10px 0 10px 0;
	}

	.abandonCertification .title {
		font-size: 16px;
		font-weight: bold;
		margin: 10px 0 20px 0;
	}
</style>
